<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">开始倒计时定时器</button>
    <button class="btn2">停止倒计时定时器</button>
    <button class="btn3">开启一个间隔定时器</button>
    <button class="btn4">清除一个间隔定时器</button>
    <script>
        // 定时器 ：1.倒计时定时器   2.间隔定时器 
        // 一、倒计时定时器 ： 倒计时一段时间后执行代码 
        // 第一个参数是倒计时之后 要执行的回调函数  第二个参数是倒计时的时间，单位是毫秒 ，执行一次之后就结束了
        // 1.开启一个 倒计时定时器 
        var timer1;
        document.querySelector(".btn1").onclick = function () {
            console.log("点击了");
            timer1 =  setTimeout(function () { // 回调函数 
                console.log("执行了");
            }, 3000);
            console.log(timer1);


            // var timer2 =  setTimeout(function () { // 回调函数 
            //     console.log("执行了222");
            // }, 4000);
            // console.log(timer2);
        }
        // 2. 清除倒计时定时器
        // clearTimeout(是定时器的返还值)： 定时器的返还值 是一个数字 ，它是定时器的id
        document.querySelector(".btn2").onclick = function(){
            console.log("清除倒计时定时器");
            clearTimeout(timer1);
        }

        // 二、间隔定时器 ： 间隔指定时间 在执行代码 ，重复执行；
        //第一个参数是间隔执行的回调函数 第二个参数是间隔时间 单位是毫秒
        // 1.开启间隔定时器 
        var timer3;
        document.querySelector(".btn3").onclick = function(){
           timer3 =   setInterval(function(){
                console.log("间隔定时器执行了");
            }, 1000);
            console.log(timer3)
        }


        // 2.清除间隔定时器 

        document.querySelector(".btn4").onclick = function(){
            console.log("清除了间隔定时器");
            // clearInterval(timer3);
            clearTimeout(timer3);
        }



        /* 
        总结 ： 1.倒计时定时器 setTimeout(function(){},2000);
                清除倒计时定时器 clearTimeout("返还值")
                2.间隔定时器 setInterval(fucntion(){},2000);
                清除间隔定时器  clearInterval(“定时器的返还值”);
        */







    </script>
</body>

</html>